<template>
  <view class="scene-setting">
    <view class="scene-list">
      <view
          v-for="item in sceneList"
          :key="item.key"
          class="scene-item"
          @click="editScenario(item)"
          @longpress="openMoreAction(item)">
        <view class="scene-name-box">
          <view class="scene-name">
            <text class="iconfont icon-lamp-fill"></text>
            {{ item.name }}
          </view>
          <view class="modify-time">{{ item.modifyTime }}</view>
        </view>
        <view class="scene-detail">
          <view v-for="child in item.displayParams" :key="child.name" class="param-item">
            <view class="value">{{ child.value }}</view>
            <view class="label">{{ child.label }}</view>
          </view>
        </view>
      </view>
    </view>
    <view v-if="projectInfo.canEdit" class="page-bottom-btn" @click="addScenario()">新增场景</view>
    <uni-popup ref="popup" type="bottom">
      <view class="delete-btn" @click="deleteScenario()">删除场景</view>
    </uni-popup>
  </view>
</template>

<script>
export default {
  name: 'scene-setting',
  props: {
    projectInfo: {
      type: Object
    },
    sceneList: {
      type: Array
    }
  },
  data() {
    return {
      targetScenario: null
    }
  },
  methods: {
    initData() {},
    addScenario() {
      if (!this.projectInfo.canEdit) return
      uni.navigateTo({
        url: `/pages/settings/add-scenario/add-scenario?projectId=${this.projectInfo.id}`
      })
    },
    editScenario(targetScenario) {
      uni.navigateTo({
        url: `/pages/settings/add-scenario/add-scenario?projectId=${this.projectInfo.id}&canEdit=${this.projectInfo.canEdit}&sceneId=${targetScenario.id}`
      })
    },
    openMoreAction(targetScenario) {
      if (!this.projectInfo.canEdit) return
      this.targetScenario = targetScenario
      this.$refs.popup.open()
    },
    deleteScenario() {
      const self = this
      if (!self.targetScenario) return
      this.$refs.popup.close()
      uni.request({
        url: '/project_scene/del',
        data: {
          id: self.targetScenario.id
        },
        success(result) {
          if (result.data.success) {
            self.$emit('refreshScene')
            uni.showToast({
              icon: 'success',
              title: '删除成功'
            })
          }
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.scene-setting {
  padding-bottom: 100rpx;
}
.scene-item {
  background-color: $white;
  border-radius: 10rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
}
.scene-name-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.scene-name {
  display: flex;
  align-items: center;
  font-size: $font-size-4;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 500rpx;
  .iconfont {
    font-size: 40rpx;
    color: $primary;
    margin-right: 20rpx;
  }
}
.modify-time {
  color: $text-secondary;
  font-size: $font-size-1;
}
.scene-detail {
  margin-top: 20rpx;
  border-radius: 10rpx;
  background-color: rgba($primary, .1);
  display: flex;
  justify-content: space-between;
  padding: 20rpx 10rpx;
  .param-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .value {
      color: $text-main;
      font-size: $font-size-5;
    }
    .label {
      margin-top: 4rpx;
      color: $text-secondary;
      font-size: $font-size-1;
    }
  }
}
.delete-btn {
  background-color: $danger;
  color: $white;
  height: 100rpx;
  text-align: center;
  line-height: 100rpx;
  font-size: $font-size-4;
}
</style>
